<template>
  <div>
    <el-upload
      :file-list="fileList"
      :limit="1"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :on-preview="preview"
      :on-remove="remove"
      :on-error="error"
      :on-exceed="exceed"
      class="avatar-uploader"
      accept="image/*"
      action="http://192.168.1.68:18082/user/upload/image"
      list-type="picture-card"
    >
      <div class="businessPic pic" v-if="kind == 'businessPic'">
        <div class="small"></div>
        <img
          width="100%"
          :src="ruleForm.businessLicence"
          alt
        />
        <!-- <i class="el-icon-plus imgIcon"></i> -->
      </div>
      <div class="handPic pic" v-if="kind == 'handPic'">
        <div class="small"></div>
        <img
          width="100%"
          :src="ruleForm.picture"
          alt
        />
        <!-- <i class="el-icon-plus imgIcon"></i> -->
      </div>
      <div class="shopPic pic" v-if="kind == 'shopPic'">
        <div class="small"></div>
        <img
          width="100%"
          :src="ruleForm.bgPicture"
          alt
        />
        <!-- <i class="el-icon-plus imgIcon"></i> -->
      </div>
    </el-upload>
  </div>
</template>

<script>
import $ from "jquery"
export default {
  name: "upload",
  props: {
    kind: {
      type: String
    },
    title: {
      type: String
    },
  },
  created(){
    
  },
  data() {
    return {
      fileList: [],
      ruleForm: {
        businessLicence: "",
        bgPicture: "",
        picture: "",
        imageUrl: ""
      }
    }

  },
  methods: {
    //设置显示的图片
    setPic(imgs){
      this.ruleForm.businessLicence = imgs.businessLicence;
      this.ruleForm.bgPicture = imgs.bgPicture;
      this.ruleForm.picture = imgs.picture;
    },
    //移除图片边框
    removeBorder(){
      if(this.kind == "businessPic"){
        $(".businessPic").css({border: "none"});
        $(".businessPic .small").css({border: "none"});
      }else if(this.kind == "handPic"){
         $(".handPic").css({border: "none"});
         $(".handPic .small").css({border: "none"});
      }else if(this.kind == "shopPic"){
         $(".shopPic").css({border: "none"});
         $(".shopPic .small").css({border: "none"});
      }
    },
    //添加恢复图片边框
    recoverBorder(){
      if(this.kind == "businessPic"){
        $(".businessPic").css({border: "1px solid #ccc"});
        $(".businessPic .small").css({border: "1px solid #ccc"});
      }else if(this.kind == "handPic"){
         $(".handPic").css({border: "1px solid #ccc"});
         $(".handPic .small").css({border: "1px solid #ccc"});
      }else if(this.kind == "shopPic"){
         $(".shopPic").css({border: "1px solid #ccc"});
         $(".shopPic .small").css({border: "1px solid #ccc"});
      }
    },
    //清空图片
    clearImg(){
      this.ruleForm.imageUrl = "";
    },
    exceed(files,fileList){
      console.log(files, fileList);
    },
    preview(file) {
      this.dialogVisible = true;
      this.dialogImageUrl = file.url;
    },
    remove(file, fileList) {
      console.log(file, fileList);
      this.ruleForm.imageUrl = "";
    },
    error(err, file, fileList) {
      console.log(err, file, fileList);
    },
    handleAvatarSuccess(res, file) {
      console.log("上传成功res", res);
      console.log("上传成功file", file);
      if(this.kind == "businessPic"){
        this.ruleForm.businessLicence = res.data;
        $(".businessPic").css({border: "none"});
        $(".businessPic .small").css({border: "none"});
      }else if(this.kind == "handPic"){
         this.ruleForm.picture = res.data;
         $(".handPic").css({border: "none"});
         $(".handPic .small").css({border: "none"});
      }else if(this.kind == "shopPic"){
         this.ruleForm.bgPicture = res.data;
         $(".shopPic").css({border: "none"});
         $(".shopPic .small").css({border: "none"});
      }
      // console.log("this.ruleForm", this.ruleForm);
      // console.log("this.fileList", this.fileList);
      this.$emit("selectImg", this.ruleForm, this.kind);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
  },
  created() {}
};
</script>

<style lang="less" scoped>
  .pic{
    border: 1px solid #ccc;
    position: relative;
    width: 100px;
    height: 100px;
  }
  /deep/.el-upload--picture-card{
    border: none !important;
  }
  .small{
    position: absolute;
    left: 1px;
    top: 1px;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
  }
</style>